<template>
  <view class="container">
    <view
      class="nav-wraper"
      :style="{
        'margin-top': navTopTmp + 'px',
        width: nav_width + 'px',
        height: nav_height + 'px',
      }"
    >
      <u-tabs :list="list1" @click="click" class="navs"></u-tabs>
    </view>

    <!-- 搜索框 -->
    <search></search>
  </view>
</template>
<script>
export default {
  name: 'IndexCom',
  data() {
    return {
      nav_height: 0,
      nav_width: 0,
      navTopTmp: 0,
      list1: [{
        name: '待提货',
      }, {
        name: '在途',
      }, {
        name: '已完成'
      }]
    }
  },
  onLoad() {
    // 胶囊按钮信息
    const menu = wx.getMenuButtonBoundingClientRect()
    console.log(menu);
    this.nav_height = menu.height
    console.log(this.nav_height);
    const systemInfo = wx.getSystemInfoSync()
    console.log(systemInfo);
    // 导航栏距离顶部的距离
    this.navTopTmp = menu.bottom - menu.height
    // 胶囊按钮距离右侧的距离
    const menuRightTmp = systemInfo.screenWidth - menu.right
    this.nav_width = systemInfo.screenWidth - menuRightTmp * 2 - menu.width

  },
  computed: {
  },
  methods: {
    click(item) {
      console.log('item', item);
    }
  }
}
</script>
<style lang='scss'  scoped>
.nav-wraper {
  margin-bottom: 16px;
}
</style>
